<template>
  <div class="business-info">
    <div class="title">为上百家企业客户提供服务</div>
    <div class="business-list">
      <div class="item" v-for="(item,index) in business" :key="index">
        <img class="icon" :src="`${origin}${item}`" alt="">
      </div>
      <div class="w107" v-if="sponsor.length % 3 === 2"></div>
    </div>
    <div class="sponsor">友情赞助</div>
    <div class="business-list">
      <div class="item" v-for="(item,index) in sponsor" :key="index">
        <img class="icon" :src="`${origin}${item}`" alt="">
      </div>
      <div class="item">
        <div class="placehodler">虚位以待</div>
      </div>
      <div class="w107" v-if="sponsor.length % 3 === 1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, defineProps } from 'vue'
let origin = 'https://www.webfunny.cn/resource/company_logo/'
const props = defineProps({
  list: {
    type: Object,
    default: () => ({})
  }
})
const business = computed(() => {

  const one = props.list.one
  return one ? one?.reverse() : []

})
const sponsor = computed(() => {

  const three = props.list.three
  return three ? three : []

})

</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.business-info
  padding 54px 16px 0
  .title
    font-size 18px
    font-weight 500
    color #363B52
    line-height 25px
    padding-bottom 15px
    text-align center
  .business-list
    display flex
    flex-wrap wrap
    justify-content space-between
    .item
      {flexBox}
      width 107px
      height 43px
      border-radius 4px
      border 1px solid #EBEBEB
      flex-shrink 0
      margin-top 11px
      overflow hidden
    .icon
      width 80px
    .w107
      width 107px
    .placehodler
      {flexBox}
      font-size 9px
      font-weight 500
      color #828594
      line-height 12px
      width 96px
      height 32px
      border 1px dashed #EBEBEB
  .sponsor
    font-size 16px
    font-weight 400
    color #363B52
    line-height 22px
    margin-top 24px


</style>